<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { ref, reactive, onMounted, nextTick } from 'vue'
// 客服图标
import customerServiceIcon from '@/static/My/customerService.png'
// 设置图标
import SetUpIcon from '@/static/My/setUp.png'
// 复制图标
import copyIcon from '@/static/My/copy.png'
// 签到图标
import signInIcon from '@/static/My/signIn.png'
// 礼物图标
import giftIcon from '@/static/My/gift.png'
// 置顶图标
import topIcon from '@/static/My/TopUp.png'
// 承诺书图标
import letterOfCommitmentIcon from '@/static/My/letterOfCommitment.png'
// 我的活动图标
import MyActivitiesIcon from '@/static/My/MyActivities.png'
// 互换图标
import InterchangeIcon from '@/static/My/Interchange.png'
// 专属红娘图标
import matchmakerIcon from '@/static/My/matchmaker.png'
// 未登录的图片
import NoLoginIcon from '@/static/My/NoLogin.png'
import { useUserComfirmInfo } from '@/stores/index'

import { storeToRefs } from 'pinia'
// 完善资料电话本图标
import PhonebookIcon from '@/static/My/PhonebookIcon.png'
// 开通会员Icon
import VipIcon from '@/static/My/VIPIcons.png'

import type { listData, blindData } from '@/services/my'
import { listData, blindData, getMoneyAPI, signupAPI } from '@/services/my'
import { http } from '@/utils/http'

import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import {  onShow, } from '@dcloudio/uni-app'

const progressPercent = ref<number>(80) // 进度百分比

const showLogin = ref<boolean>(true)
const useUserComfirmProps = useUserComfirmInfo()
//认证列表，及其路由
const { list,cache} = storeToRefs(useUserComfirmProps)
interface MyBlindDatelist {
  url: any
  text: string
  path: string
}

const MyBlindDate = reactive<MyBlindDatelist[]>([
  { url: letterOfCommitmentIcon, text: '承诺书', path: '/pages/my/MyCommitment/MyCommitment' },
  { url: MyActivitiesIcon, text: '我的活动', path: '/pages/my/MyActivities/MyActivities' },
  { url: InterchangeIcon, text: '互换', path: '/pages/my/MyInterchange/MyInterchange' },
  { url: matchmakerIcon, text: '专属红娘', path: '/pages/my/MyMatchmaker/MyMatchmaker' },
])

// 当前用户信息
let users: any = ref('')

const jump = (url: string): void => {
  uni.navigateTo({
    url: url,
  })
}
// 获取弹层组件
const popup = ref()
// 弹框所显示的内容
const msgDingyue = ref()
const close = () => {
  popup.value.open()
}
// 打开弹框并传递数据
const dialogToggle = (type:any) => {
  popup.value.open()
  msgDingyue.value = type
}
// 用户点击确定跳转到登录页
const dialogConfirm = () => {
  jump('/pages/login/login')
}

onShow(() => {
  const userInfo = uni.getStorageSync('userInfo')
  if (userInfo) {
    users.value = userInfo
  }
})

onMounted(() => {
  if(!cache.value){
    useUserComfirmProps.getUserInfo()
    cache.value = true
  }
})

const userId = '1'
const money = ref(0) || 0
// 进入页面获取金币的接口
const getmoney = async () => {
  const data = await getMoneyAPI(userId)
  console.log(data)
  if (data.code == 200) {
    money.value = data.money
  }
}

// 签到获取金币的接口
const signUp = async () => {
  const data = await signupAPI(userId)
  console.log(data)
  if (data.code == 200) {
    uni.showToast({
      title: data.msg,
      icon: 'success',
    })
    money.value = data.money
  } else if (data.code == 201) {
    uni.showToast({
      title: data.msg,
      icon: 'error',
    })
  }
}
onMounted(() => {
  nextTick(() => {
    getmoney()
  })
})
</script>

<template>
  <view id="my">
    <!-- 用户已登录所展示 -->
    <view v-if="users">
      <view class="header">
        <!--最上方设置客服icon按钮 -->
        <view class="icons">
          <image :src="customerServiceIcon" class="header-icon"
            @click="jump('/pages/my/CustomerService/MyCustomerServicePage')"></image>
          <image :src="SetUpIcon" class="header-icon" @click="jump('/pages/my/SetUp/SetUpPage')"></image>
        </view>
      </view>
      <view class="users">
        <!-- 用户头像 -->
        <view class="users-img">
          <image src="https://ww4.sinaimg.cn/mw690/008sMnXQgy1hrjato0ovdj32yo4g0kjn.jpg" class="user-touxiang"></image>
        </view>
        <!-- 手机号和id以及复制按钮 -->
        <view class="users-phone">
          <view class="u-phone">
            <text>{{ users?.phone?.replace(users.phone.slice(3, 7), '****') }}</text>
          </view>
          <view class="u-Id">
            <text>我的ID: {{ users?.id?.slice(0, 8) }}</text>
            <image :src="copyIcon" class="u-copy" />
          </view>
        </view>
        <view class="u-qiandao">
          <!-- 签到按钮 -->
          <button
            @click="signUp"
            size="mini"
            type="primary"
            style="
              color: #ffffff;
              background-color: #5dc9d7;
              border-color: #5dc9d7;
              border-radius: 50rpx;
              display: flex;
              align-items: center;
              font-size: 30rpx;
            ">
            <image :src="signInIcon" mode="scaleToFill" style="width: 40rpx; height: 40rpx; margin-right: 10rpx" />
            签到
          </button>
        </view>
      </view>
      <!-- 用户操作信息，喜欢金币置顶礼物 -->
      <view class="loves">
        <view class="myloves" @click="jump('/pages/my/MyLike/MyLike')">
          <p>0</p>
          <p>我的喜欢</p>
        </view>
        <view class="myloves" @click="jump('/pages/my/MyMoney/MyMoney')">
          <p>{{ money }}</p>
          <p>我的金币</p>
        </view>
        <view class="myloves" @click="jump('/pages/my/MyTop/Top')">
          <image :src="topIcon" style="width: 30rpx; height: 30rpx" />
          <p>我要置顶</p>
        </view>
        <view class="myloves" @click="jump('/pages/my/MyGift/MyGift')">
          <image :src="giftIcon" style="width: 30rpx; height: 30rpx" />
          <p>我的礼物</p>
        </view>
      </view>
      <view class="mymain">
        <!-- 开通会员 -->
        <view class="vip">
          <view class="v-header" @click="jump('/pages/my/VIP/vip')">
            <text>普通会员</text>
            <uni-icons type="right" size="15"></uni-icons>
          </view>
          <view class="v-main">
            <text>开通会员 飞速脱单</text>
          </view>
          <view class="v-footer">
            <button
              size="mini"
              type="primary"
              class="footer-btns"
              @click="jump('/pages/my/VIP/vip')"
            >
              开通VIP
            </button>
            <image :src="VipIcon" class="footer-icon" />
          </view>
        </view>
        <view class="vip">
          <!-- 修改资料 -->
          <view class="v-header" @click="jump('/pages/my/Edit/Editprofile')">
            <text>修改资料</text>
            <uni-icons type="right" size="15"></uni-icons>
          </view>
          <view class="v-main">
            <text>当前资料正在审核中</text>
          </view>
          <view class="v-footer">
            <!-- <button size="mini" type="primary"
              style=" color: #ffffff; background-color: #fd9a1e; border-color: #fd9a1e; border-radius: 50rpx; font-size: 3vw;width: 23vw; height: 8vw;"
              @click="jump('/pages/my/Edit/Editprofile')">
              开通VIP
            </button>
            <image :src="PhonebookIcon" class="footer-icon" /> -->
            <view class="progress-container">
              <view class="progress-bar" :style="{ width: progressPercent + '%' }">
                <text class="progress-text">{{ progressPercent }}%</text>
              </view>
            </view>
            <image :src="PhonebookIcon" class="footer-icon" />
          </view>
        </view>
      </view>
      <view class="look">
        <!-- 用户备考过以及用户看过谁 -->
        <view class="l-header">
          <view class="l-header-left" @click="jump('/pages/my/Look/Look')">
            <text>谁看过我</text>
          </view>
          <view class="l-header-right" @click="jump('/pages/my/Look/Look')">
            <text>我看过谁</text>
            <uni-icons type="right" size="3.5vw"></uni-icons>
          </view>
        </view>
        <view class="l-main">
          <!-- 这个位置采用的是后端传入过来的数据并渲染谁看过我 -->
          <image src="https://ww4.sinaimg.cn/mw690/008sMnXQgy1hrjato0ovdj32yo4g0kjn.jpg"
            style="width: 80rpx; height: 80rpx; border-radius: 50%" />
          <view class="texts">
            <text style="color: #999999">最近有</text>
            <!-- 这个位置后续是活动数据 -->
            <text style="color: #ff0084">1</text>
            <text style="color: #999999">个人看过你，</text>
            <!-- 这个位置是跳转至开通VIP页面 -->
            <text style="color: #00aabf" @click="jump('/pages/my/VIP/vip')">点击开通VIP查看</text>
          </view>
        </view>
      </view>
      <!-- 诚信认证 -->
      <view class="Authentication">
        <view class="A-header">
          <view class="A-header-left">
            <text>诚信认证</text>
          </view>
          <navigator url="/pages/my/open/open" open-type="navigate" hover-class="navigator-hover"
            class="A-header-right">
            <text>查看全部</text>
            <uni-icons type="right" size="3.5vw" class="A-icon"></uni-icons>
          </navigator>
        </view>
        <view class="A-grid">
          <!-- 诚信认证所展示的icon以及text  -->
          <view v-for="(item, index) in list" :index="index" :key="index" class="A-grid-item">
            <navigator :url="item.path" open-type="navigate" hover-class="navigator-hover">
              <!-- 哪些认证了哪些就高亮 -->
              <view class="grid-item-box" :style="`opacity:${item.flag ? '1' : '0.3'}`">
                <view :style="`width: 60rpx; height: 60rpx;`" class="grid-item-box-image">
                  <image :src="item.url" :style="`width: 60rpx; height: 60rpx;`"></image>
                </view>
                <text class="text">{{ item.text }}</text>
              </view>
            </navigator>
          </view>
        </view>
      </view>
      <!-- 我的相亲 -->
      <view class="MyBlindDate">
        <view class="M-header">
          <view class="M-header-left">
            <text>我的相亲</text>
          </view>
        </view>
        <view class="M-grid">
          <!-- 我的相亲所渲染出来的 -->
          <view
            v-for="(item, index) in MyBlindDate"
            :index="index"
            :key="index"
            class="M-grid-item"
            @click="jump(item.path as string)"
          >
            <view class="grid-item-box">
              <image :src="item.url" style="width: 60rpx; height: 60rpx"></image>
              <text class="text">{{ item.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else>
      <!-- 用户未登录所展示 -->
      <view class="header">
        <view class="icons">
          <image :src="customerServiceIcon" class="header-icon"></image>
          <image :src="SetUpIcon" class="header-icon"></image>
        </view>
      </view>
      <view class="users">
        <view class="users-img">
          <image
            src="https://t12.baidu.com/it/u=3129765318,228342409&fm=30&app=106&f=JPEG?w=640&h=640&s=FD8C38720777662558FCD4DA0000C0B1"
            class="user-touxiang"></image>
        </view>
        <view class="users-phone">
          <view class="u-phone" @click="jump('/pages/login/login')">
            <text style="font-family: 'FZXZYJW--GB1-0', FZXZYJW--GB1-0">请点击登录</text>
          </view>
          <view class="u-Id" @click="jump('/pages/login/login')">
            <text>登录/注册更精彩</text>
          </view>
        </view>
        <view class="u-qiandao">
          <button size="mini" type="primary" style="
              color: #ffffff;
              background-color: #5dc9d7;
              border-color: #5dc9d7;
              border-radius: 50rpx;
              display: flex;
              align-items: center;
              font-size: 30rpx;
            "
            @click="jump('/pages/login/login')"
          >
            登录
          </button>
        </view>
      </view>
      <view class="loves">
        <view class="myloves" @click="dialogToggle('您还未登陆，请前去登录')">
          <p>0</p>
          <p>我的喜欢</p>
        </view>
        <view class="myloves" @click="dialogToggle('您还未登陆，请前去登录')">
          <p>0</p>
          <p>我的金币</p>
        </view>
        <view class="myloves" @click="dialogToggle('您还未登陆，请前去登录')">
          <image :src="topIcon" style="width: 30rpx; height: 30rpx" />
          <p>我要置顶</p>
        </view>
        <view class="myloves" @click="dialogToggle('您还未登陆，请前去登录')">
          <image :src="giftIcon" style="width: 30rpx; height: 30rpx" />
          <p>我的礼物</p>
        </view>
      </view>
      <view class="nologin">
        <!-- 未登录所展示的图片 -->
        <image :src="NoLoginIcon" />
        <text class="notext">您还未登录哦........</text>
      </view>
    </view>
    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
          :type="msgType"
          cancelText="取消"
          confirmText="确定"
          :title="msgDingyue"
          @confirm="dialogConfirm"
          @close="close"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<style lang="scss">
#my {
  width: 100%;
  min-height: 100vh;
  padding: 3%;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .header {
    width: 100%;
    height: 5vh;
    display: flex;
    flex-direction: row-reverse;

    .icons {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      .header-icon {
        width: 7vw;
        height: 7vw;
      }
    }
  }

  .users {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .users-img {
      width: 25vw;
      height: 25vw;

      .user-touxiang {
        width: 25vw;
        height: 25vw;
        border-radius: 50%;
      }
    }

    .users-phone {
      width: 40%;
      height: 55%;

      .u-phone {
        font-size: 40rpx;
        font-weight: 600;
      }

      .u-Id {
        width: 100%;
        height: 50%;
        font-size: 25rpx;
        color: #a1a1a1;
        display: flex;
        align-items: center;

        .u-copy {
          width: 13%;
          height: 40rpx;
          border-radius: 50%;
          margin-left: 5%;
        }
      }
    }

    .qiandao {
      display: flex;
      align-items: center;
    }
  }

  .nologin {
    width: 100%;
    height: 50vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .notext {
      color: #c0bebe;
      margin-top: 10%;
    }
  }

  .loves {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10% 0 5% 0;

    .myloves {
      text-align: center;
      font-size: 3.5vw;
    }
  }

  .mymain {
    width: 100%;
    height: 33vw;
    display: flex;
    justify-content: space-between;

    .vip {
      width: 48%;
      height: 100%;
      background-color: #ffffff;
      padding: 3%;
      box-sizing: border-box;
      border-radius: 30rpx;

      .v-header {
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: space-between;
        font-size: 33rpx;
        font-weight: 600;
        align-items: center;
        margin-top: 10rpx;
      }

      .v-main {
        width: 100%;
        height: 30%;
        font-size: 25rpx;
        padding: 2% 0;
        color: #aaa9a9;
      }

      .v-footer {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: space-around;

        .footer-btns {
          color: #ffffff;
          background: linear-gradient(to right, #ef811f, #fce1c9);
          border-radius: 50rpx;
          font-size: 3.4vw;
          width: 23vw;
          height: 8vw;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .footer-icon {
          width: 9vw;
          height: 9vw;
          margin-left: 10vw;
          margin-top: 3vw;
        }

        .progress-container {
          width: 23vw;
          /* 容器宽度 */
          height: 8vw;
          /* 容器高度 */
          background-color: #ffffff;
          /* 容器背景色 */
          border-radius: 15vw;
          /* 容器圆角（可选） */
          position: relative;
          /* 为了能够绝对定位内部的文本 */
          overflow: hidden;
          /* 确保超出容器的部分不可见 */
          border: 1rpx solid #5089c4;
        }

        .progress-bar {
          height: 100%;
          background: linear-gradient(to right, #4db1e4, #a8dae8);
          /* 蓝色渐变 */
          border-radius: 15vw;
          /* 与容器相同的圆角 */
          transition: width 0.5s ease;
          /* 平滑过渡效果 */
          position: absolute;
          /* 绝对定位以覆盖整个容器 */
          left: 0;
          top: 0;
          display: flex;
          justify-content: flex-start;
          /* 将文本向右对齐 */
          align-items: center;
          /* 垂直居中 */
          padding-right: 1vw;
          /* 为文本留出空间 */
        }

        .progress-text {
          color: #f5f5f5;
          /* 文本颜色 */
          font-size: 4vw;
          /* 文本大小 */
          font-weight: bold;
          /* 文本加粗 */
        }
      }
    }
  }

  .look {
    width: 100%;
    height: 40vw;
    background-color: #ffffff;
    padding: 3%;
    box-sizing: border-box;
    margin-top: 3%;
    border-radius: 30rpx;

    .l-header {
      width: 100%;
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l-header-left {
        font-size: 33rpx;
        font-weight: 600;
      }

      .l-header-right {
        font-size: 25rpx;
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .l-main {
      width: 100%;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .texts {
        text-align: center;
        width: 100%;
        margin-top: 20rpx;
        font-size: 27rpx;
      }
    }
  }

  .Authentication {
    width: 100%;
    height: 70vw;
    padding: 3%;
    background-color: #ffffff;
    box-sizing: border-box;
    margin-top: 3%;
    border-radius: 30rpx;
    transition: height 0.5s;

    .A-header {
      width: 100%;
      height: 12vw;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .A-header-left {
        font-size: 33rpx;
        font-weight: 600;
      }

      .A-header-right {
        font-size: 3.5vw;
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .A-grid {
      width: 100%;
      height: calc(100% - 30px);
      padding: 2% 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .A-grid-item {
        width: 30%;

        .grid-item-box {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0.5rem 0;
          box-sizing: border-box;

          .text {
            margin: 1rem 0;
            font-size: 3.5vw;
          }
        }
      }
    }
  }

  .MyBlindDate {
    width: 100%;
    height: 30vw;
    padding: 3%;
    background-color: #ffffff;
    box-sizing: border-box;
    margin-top: 3%;
    border-radius: 30rpx;

    .M-header {
      width: 100%;
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .M-header-left {
        font-size: 33rpx;
        font-weight: 600;
      }

      .M-header-right {
        font-size: 25rpx;
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .M-grid {
      width: 100%;
      height: 80%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;

      justify-content: space-between;
      align-items: center;

      .M-grid-item {
        width: 25%;
        height: 50%;

        .grid-item-box {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 15px 0;
          font-size: 3.5vw;
        }
      }
    }
  }
}
</style>
